<template>
    <div id="modelBtn">
      <div class="model" v-show="choice === 0">
        <div>远程模式<span></span></div>
        <div id="select-arr" @click.self="toggleUl = !toggleUl">
          {{selectValue}}
          <Icon :type="toggleUl ? 'md-arrow-dropup' : 'md-arrow-dropdown'"/>
          <ul id="select-value" v-show="toggleUl">
            <li v-for="(item, index) in selectList" :key="index" @click.stop="selectClick(item)" :style="{background: selectValue === item ? '#7092fd' : ''}">{{item}}</li>
          </ul>
        </div>
        <div class="param-set" @click="paramsBtn">参数设定</div>
      </div>
      <div class="model" v-show="choice === 1">
        <div>本地模式<span></span></div>
        <div>现场自动</div>
      </div>
      <div class="model" v-show="choice === 2">
        <div>应急模式<span></span></div>
        <div>现场手动</div>
      </div>
    </div>
</template>

<script>
    export default {
        // 组件的名称
        name: 'modelBtn',
        // props 可以是数组或对象，用于接收来自父组件的数据
        props: {
          // 三种模式具体显示哪一个
          choice: {
            type: Number,
            default: 0
          },
          // 下拉框显示的 是什么
          selectValue: {
            type: String,
            default: ''
          }
        },
        // 数据绑定
        data () {
            return {
              selectList: ['现场自动', '远程手动'],
              // 下面 ul 是否显示的开关
              toggleUl: false
            }
        },
        // 组件
        components: {},
        // 注意，不应该使用箭头函数来定义 methods函数 或者  computed函数 (例如 aDouble: () => this.a * 2)。
        // 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined
        // 方法
        methods: {
          // ul li 下拉框选中事件
          selectClick (item) {
            if (this.selectValue === item) return false
            this.$emit('selectClick', item)
            this.toggleUl = !this.toggleUl
          },
          // 参数设定
          paramsBtn () {
            this.$emit('paramsBtn')
          }
        },
        // 计算属性
        computed: {},
        // 监听
        watch: {
            // 监听路由变化
        },
        // 常用钩子函数，总共有8个，可以参照vue的生命周期看
        // 完成了 data 数据的初始化，el没有，就是说页面的dom没有完成转化，还是 {{data}} 这种
        created () {
        },
        // 完成挂载，相当于dom ready
        mounted () {
        },
        // 销毁，可以做一些定时器的销毁,缓存的清除等操作
        destroyed () {
        }
    }
</script>

<style lang="scss" scoped='scoped'>
    #modelBtn {
      height: 40px;
      .model {
        text-align: left;
        div {
          /*display: inline-block;*/
          float: left;
          text-align: center;
          width: 110px;
          background-color: rgba(76, 144, 253, 0.2);
          border-radius: 2px;
          color: $font-f;
        }
        div:nth-child(1) {
          background: url($image + 'model_btn.png') no-repeat center center;
          background-size: 100% 100%;
          font-size: 18px;
          position: relative;
          span {
            position: absolute;
            top: 12px;
            left: 94px;
            z-index: 5;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-right: 16px solid rgba(76, 144, 253, 0.2);
            border-bottom: 8px solid transparent;
          }
        }
        .param-set {
          border-left: 2px solid rgba(76, 144, 253, .2);
          &:hover {
            cursor: pointer;
          }
        }
        #select-arr {
          position: relative;
          &:hover {
            cursor: pointer;
          }
        }
        #select-value {
          position: absolute;
          top: 44px;
          left: 0px;
          width: 110px;
          z-index: 10;
          li {
            background-color: #263976;
            &:hover {
              cursor: pointer;
              background-color: #7092fd;
            }
          }
          li:first-child {
            border-bottom: 1px solid rgba(76, 144, 253, .2);
          }
        }
      }
    }
</style>
